<template>
  <div>
    <!-- 准备容器 -->
    <div ref="chart" style="width:100%;height:300px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core' //引入echarts5
import 'echarts/theme/macarons'  //图表主题
import chinaMap from '@/assets/json/china.json'  //引入地图文件

import {getMap} from '@/api/http'

export default {
  data(){
    return {
        mapData:[]
    }
  },
  mounted(){
      this.getData(); //发送请求
  },
  methods:{
      init(){
          //初始化
          let myChart = echarts.init(this.$refs.chart);
          echarts.registerMap('china', chinaMap); // 注册可用的地图

          let option = {
                title:{
                    text:'  一起学前端',  //标题
                    left:'center',  //居中
                    top:'3%'   //上间距
                },
                tooltip:{   //提示信息  地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
                   tigger: 'item' , 
                   formatter: '城市名：{b}<br/>学员数：{c}'
                },
                series: [{
                   type: 'map',
                   mapType:'china',
                   label:{     //文字显示
                       show: true,   //是否显示标签。
                       color: '#000', //文字颜色
                       fontSize: 10     //文字大小
                   },
                   data:this.mapData,  //动态数据处理
                   emphasis: {   //高亮状态下的多边形和标签样式。
                           //控制地图滑过后的颜色
                           label:{
                           color: '#fff', //移入后显示颜色
                            fontSize: 12,
                           },
                           itemStyle:{ //移入后颜色及边框
                               areaColor: '#1bc1ad',   //区域颜色
                               borderColor: '#ccc'   //边框颜色
                           },
                       },
                   }
               ],
                visualMap:[{   //数据分段
                   type: 'piecewise', // 定义为分段型 visualMap
                   show: true,
                   pieces: [
                       {min: 600, max: 10000},
                       {min: 300, max: 599},
                       {min: 100, max: 299},
                       {min: 10, max: 99},
                       {min: 1, max: 9},
                       {value: 0},
                   ],
                   inRange: {   //定义 在选中范围中 的视觉元素。
                       color: [
                       '#fff',
                       '#b3ffff',
                       '#c0f478', 
                       '#f2d872',
                       '#f3bbff',
                       '#fea78a'], //颜色可以在实时地图上取
                   },
                   itemWidth: 10,       //显示框的宽高
                   itemHeight: 10,
                }],
            };
          //设置渲染
          myChart.setOption(option);
      },
      //获取地图数据
      getData() {
          getMap().then(res=>{
              let {code,data} = res.data;
              if(code == 20000){
                  this.mapData = data;
                  this.init();
              }
          })
      }
  }
}
</script>


